<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view/>
    </transition>

    <tabbar style="position:fixed;">
      <tabbar-item selected link="/">
        <span slot="label" class="fa fa-refresh"></span>
      </tabbar-item>
      <tabbar-item link="/search">
        <span slot="label" class="fa fa-compass"></span>
      </tabbar-item>
      <tabbar-item link="/me">
        <span slot="label" class="fa fa-user"></span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vux";
export default {
  name: "App",
  data: function() {
    return {
      transitionName: ""
    };
  },
  components: {
    Tabbar,
    TabbarItem
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }
};
</script>

<style>
* {
  margin: 0;
  outline: 0 none;
  padding: 0;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
body,
html,
p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.weui-tabbar {
  width: 100vw;
  position: fixed;
  bottom: 0;
  vertical-align: bottom;
  z-index: 999;
}
.weui-tabbar span {
  font-size: 8vw;
}
</style>
